{% extends "tools/base_tool.html" %}

{% block extra_head %}
<!-- 引入必要的库 -->
<script src="/static/js/html-to-image.js"></script>
<link rel="stylesheet" href="/static/css/ico-generator.css">
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-lg-6">
            <!-- 基本设置 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">基本设置</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="imageUpload" class="form-label">上传图片</label>
                        <div class="d-flex justify-content-between">
                            <button class="btn btn-primary" id="uploadImage">
                                <i data-feather="upload"></i> 上传图片
                            </button>
                            <button class="btn btn-danger hidden" id="removeImage">
                                <i data-feather="trash-2"></i> 移除
                            </button>
                        </div>
                        <input type="file" id="imageInput" accept="image/png,image/jpeg,image/svg+xml" class="hidden">
                        <small class="form-text text-muted">支持PNG、JPG和SVG格式</small>
                    </div>
                    <div id="imageSettings" class="hidden">
                        <div class="text-center mb-3" id="imagePreview">
                            <img src="" alt="图片预览" class="img-fluid img-preview">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="icoSize" class="form-label">图标尺寸 (像素)</label>
                        <div class="d-flex align-items-center">
                            <input type="range" class="form-range flex-grow-1" id="icoSize" min="16" max="512" value="64" step="16">
                            <span class="ms-2" id="icoSizeValue">64</span>
                        </div>
                        <small class="form-text text-muted">常用尺寸: 16, 32, 48, 64, 128, 256, 512像素</small>
                    </div>
                    <div class="mb-3">
                        <label for="icoRadius" class="form-label">圆角率 (%)</label>
                        <div class="d-flex align-items-center">
                            <input type="range" class="form-range flex-grow-1" id="icoRadius" min="0" max="100" value="0">
                            <span class="ms-2" id="icoRadiusValue">0%</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 预设尺寸 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">预设尺寸</h5>
                </div>
                <div class="card-body">
                    <div class="row row-cols-2 row-cols-md-4 g-2">
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-size" data-size="16">16×16</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-size" data-size="32">32×32</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-size" data-size="48">48×48</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-size" data-size="64">64×64</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-size" data-size="128">128×128</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-size" data-size="256">256×256</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-size" data-size="512">512×512</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 预设圆角 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">预设圆角</h5>
                </div>
                <div class="card-body">
                    <div class="row row-cols-2 row-cols-md-4 g-2">
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-radius" data-radius="0">无圆角</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-radius" data-radius="10">轻微圆角</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-radius" data-radius="25">中等圆角</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-radius" data-radius="50">大圆角</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-outline-primary w-100 preset-radius" data-radius="100">圆形</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <!-- 预览 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">预览</h5>
                    <div>
                        <button class="btn btn-light btn-sm" id="downloadIco" title="下载ICO图标" disabled>
                            <i data-feather="download"></i>
                        </button>
                        <button class="btn btn-light btn-sm" id="resetSettings" title="重置设置">
                            <i data-feather="refresh-cw"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body text-center">
                    <div id="icoPreview" class="d-inline-block p-3 rounded preview-container">
                        <!-- ICO预览将在这里显示 -->
                        <div class="preview-placeholder" id="previewPlaceholder">
                            <i data-feather="image" class="placeholder-icon"></i>
                            <p>请上传图片</p>
                        </div>
                        <canvas id="previewCanvas" class="hidden"></canvas>
                    </div>
                </div>
            </div>

            <!-- 使用说明 -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">使用说明</h5>
                </div>
                <div class="card-body">
                    <ol>
                        <li>点击"上传图片"按钮选择PNG、JPG或SVG格式的图片</li>
                        <li>调整图标尺寸（16-512像素）和圆角率（0-100%）</li>
                        <li>实时预览生成的ICO图标效果</li>
                        <li>点击下载按钮保存生成的ICO图标文件</li>
                    </ol>
                    <p class="text-muted">注意：ICO图标通常用于网站favicon或Windows应用程序图标</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/ico-generator.js"></script>
{% endblock %}